<script setup lang="ts">
import { ref, onMounted } from 'vue'
import usepaicing from '@/hooks/picking_team/eu_rework'
import Euechart from './Euechart.vue'

const {
    tableData,
    refreshData_throttle,
    handlOne,
    handleAll,
    currentPage4,
    pageSize4,
    total4,
    sumqty,
    handler,
    getHasUser,
    getTableData,
    exportExcel
} = usepaicing()
onMounted(() => {
    getTableData();

})

interface Eu {
    CN_Name: string
    ContractNO: string
    LotNoDate: string,
    PCS: number,
    Qty: number
}


const multipleSelection = ref<Eu[]>([])
const handleSelectionChange = (val: Eu[]) => {
    multipleSelection.value = val
}
</script>

<template>

    <el-card class="custom-card">
        <template #header>
            <div class="echart">
                <Euechart></Euechart>
            </div>
            <div class="divtitle">
                <div>
                    <el-button type="primary" @click="refreshData_throttle">刷新</el-button>
                    <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks"
                        icon="InfoFilled" icon-color="#626AEF" title="请确认是否批量提交已选择的合同?"
                        @confirm="handleAll(multipleSelection)">
                        <template #reference>
                            <el-button type="danger" v-has="`btn_eu_smtall`">批量提交</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button type="primary" @click="exportExcel" v-has="`btn_eu_excel_export`">导出Excel</el-button>
                </div>
                <el-text class="mx-1" type="danger" size="large">待返工总数量: {{ sumqty }}</el-text>
            </div>

        </template>
        <el-scrollbar style="height: calc(100vh - 390px);"> <!-- 菜单滚动条 -->
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" align="center"></el-table-column>
                <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                <el-table-column prop="CN_Name" label="国家" align="center"></el-table-column>
                <el-table-column prop="ContractNO" label="合同号" align="center"></el-table-column>
                <el-table-column prop="LotNoDate" label="派发时间" align="center"></el-table-column>
                <el-table-column prop="PCS" label="总数量" align="center"></el-table-column>
                <el-table-column prop="Qty" label="待返工数量" align="center"></el-table-column>
                <el-table-column label="操作" v-has="`btn_en_smtone`">
                    <template #default="scope">
                        <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks"
                            icon="InfoFilled" icon-color="#626AEF" title="请确认是否提交?" @confirm="handlOne(scope.row)">
                            <template #reference>
                                <el-button type="success" size="small">提交</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
        <footer style="margin: 10px 0;">
                <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10,30,50, 100,200,300]"
                background layout="total, sizes, prev, pager, next, jumper" :total="total4"
                @size-change="handler" @current-change="getHasUser" />
        </footer>
    </el-card>
</template>

<style scoped lang="scss">
.echart {
    height: 100px;
}

.divtitle {

    display: flex;
    justify-content: space-between;
    padding: 20px;
    align-items: center;

    .mx-1 {
        margin-right: 40%;
    }
}
</style>